<template>
  <div>Blog List Page</div>
  <div>
    <ul v-for="item in data" :key="item.id">
      <li>{{ item.title_name }}</li>
    </ul>
  </div>
</template>

<script setup>
// 通过axios这个http客户端 获取来自Server提供的数据
import { onMounted, ref } from "vue";
import { LIST_BLOG } from "@/api/blog";

// 响应式变量
// 为啥不能用 reactive()
let data = ref([]);

// 采用 async/await 语法改造
const fetchData = async () => {
  console.log("fetch data ...");
  try {
    const resp = await LIST_BLOG();
    data.value = resp.data.items;
  } catch (error) {
    console.log(error);
  } finally {
    console.log("fetch data complete");
  }

  //   axios
  //     .get("/vblog/api/v1/blog/")
  //     .then((resp) => {
  //       data.value = resp.data.items;
  //       console.log(resp.data.items);
  //     })
  //     .catch((error) => {
  //       console.log(error);
  //     })
  //     .finally(() => {
  //       console.log("fetch data complete");
  //     });
};

// 比如需要把resp的数据展示的页面上, 需要页面已经加载完成
onMounted(() => {
  fetchData();
});
</script>

<style lang="scss" scoped></style>
